/**
 * @authors tanqichao
 * @date    2017-03-21 15:59:36
 * @module  投放区域
 */

import { Modal, Checkbox, Tree, Radio } from 'antd';
import React, { Component } from 'react';
import Styles from './regionModal.less';

const CheckboxGroup = Checkbox.Group;
const TreeNode = Tree.TreeNode;
const RadioGroup = Radio.Group;

class RegionModal extends Component {
	constructor(props) {
		super(props)
		this.regionCodes = '11,12,1306,1309,1308,1304,1311,1310,1303,1301,1302,1305,1307,13,1402,1405,1407,1410,1411,1406,1401,1409,1403,1408,1404,14,1529,1508,1502,1504,1506,1501,1507,1505,1503,1509,1525,1522,15,80,2103,2105,2113,2102,2106,2104,2109,2114,2107,2110,2111,2101,2112,2108,21,2208,2206,2202,2204,2203,2207,2205,2224,2201,22,2306,2327,2301,2304,2311,2303,2308,2310,2309,2302,2305,2312,2307,23,81,31,3204,3208,3207,3201,3206,3205,3212,3202,3213,3203,3209,3210,3211,32,3301,3305,3304,3307,3311,3302,3308,3306,3310,3303,3309,33,3408,3403,3416,3417,3411,3412,3401,3406,3404,3410,3415,3405,3407,3402,3413,3418,34,3501,3508,3507,3509,3503,3505,3504,3502,3506,35,3610,3607,3608,3602,3604,3601,3603,3611,3605,3609,3606,36,3716,3714,3705,3717,3701,3708,3712,3715,3713,3702,3711,3709,3710,3707,3706,3704,3703,37,82,4105,4106,4108,4102,4111,4103,4113,4104,4109,4112,4114,4107,4115,4110,4101,4116,4117,4190,41,4207,4211,4202,4208,4210,4203,4213,4201,4212,4206,4209,4205,4228,4290,42,4307,4310,4304,4312,4313,4305,4303,4331,4309,4311,4306,4308,4301,4302,43,83,4451,4419,4406,4401,4416,4413,4407,4452,4409,4414,4418,4405,4415,4402,4403,4417,4453,4408,4412,4420,4404,44,4510,4505,4514,4506,4508,4503,4512,4511,4513,4502,4501,4507,4504,4509,45,4601,4602,4603,4604,4690,46,84,50,5132,5119,5101,5117,5106,5133,5116,5108,5111,5134,5105,5114,5107,5113,5110,5104,5109,5118,5115,5120,5103,51,5204,5205,5201,5202,5226,5227,5223,5206,5203,52,5305,5323,5329,5331,5334,5325,5301,5307,5309,5333,5308,5303,5326,5328,5304,5306,53,5425,5403,5401,5404,5424,5402,5422,54,85,6109,6103,6107,6110,6102,6105,6101,6104,6106,6108,61,6204,6211,6230,6202,6203,6209,6201,6229,6212,6208,6210,6205,6206,6207,62,6326,6302,6322,6323,6325,6328,6301,6327,63,6404,6402,6403,6401,6405,64,6529,6543,6528,6527,6523,6522,6532,6531,6502,6542,6504,6501,6540,6530,6590,65,86,8100,8200,7101,7105,7117,7104,7114,7115,7111,7103,7107,7109,7113,7110,7118,7102,7106,7112,7121,7108,7119,7120,7116,7122,71,87,10,999,0',
		this.state = {
			visible: false,
			regionCodes: null
		}
	}

	// 区域选择
  onCheck = (checkedKeys) => {
  	this.setState({regionCodes: checkedKeys})
  }

	// 创建
	createDom = () => {
		const areas = this.props.areas;
		const regionCodes  = this.props.regionCodes.split(',');

		if (areas) {
			const loop = data => data.map((item) => {
				if (item.children && item.children.length) {
	        return <TreeNode key={item.code} title={item.name}>{loop(item.children)}</TreeNode>
	      }
	      return <TreeNode key={item.code} title={item.name} />
			})
			return (
				<Tree
		    	checkable
		    	defaultCheckedKeys={regionCodes}
		    	defaultExpandedKeys={['10', '999', '80', '81', '82', '83', '84', '85', '86']}
        	onCheck={this.onCheck}
		    >
					{loop(areas)}
				</Tree>
			)
		}
	}

	// 弹窗
	renderModal = () => {
		// 隐藏
		const hideModalHandler = () => {
			this.setState({visible: false})
		}

		// 确定
		const okHandler = () => {
			const { onComplete } = this.props
			this.state.regionCodes === null ?
				onComplete(this.props.regionCodes) : onComplete(this.state.regionCodes.join(','));
			hideModalHandler();
		}

		return (
			<Modal
				width={800}
				title="选择投放区域"
				onOk={okHandler}
				onCancel={hideModalHandler}
				visible={this.state.visible}
				maskClosable={false}
			>
				<div style={{padding: '15px'}}>{ this.createDom() }</div>
			</Modal>
		)
	}

	render () {
		const regionCodes = this.props.regionCodes.split(',')

		// 显示
		const showModelHandler = (e) => {
			if (e) e.stopPropagation()
			this.setState({visible: true})
		}

		// 点击切换
		const handleChange = (e) => {
      const checked = e.target.value
			if (checked === 1) {
        this.props.onComplete(this.regionCodes)
      }
      this.setState({
        visible: checked === 2 ? true : false
      })
    }

    return (
      <span>
        <RadioGroup
          onChange={handleChange}
          value={(regionCodes.includes('10') && regionCodes.includes ('999')) ? 1 : 2}
        >
          <Radio value={1}>不限</Radio>
          <Radio value={2}>选择地区</Radio>
        </RadioGroup>
				{(regionCodes.includes('10') && regionCodes.includes ('999')) ? null : <a onClick={showModelHandler}>更改</a>}
				<span style={{marginLeft: '20px'}}>（Tips：定向条件将影响广告计划的用户曝光数量）</span>
				{this.renderModal()}
      </span>
    )
	}
};

export default RegionModal;
